<template>
	<view class="bg-white" style="min-height: 100vh;">
		<cu-custom :title="title"></cu-custom>
		<view class="flex justify-center">
			<view style="width: 420rpx;">
				<u-divider text="请选择上课日期时间" textSize="32rpx" textColor="#333"></u-divider>
			</view>
		</view>
		<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
			<view class="flex align-center">
				<text>时间:</text>
			</view>
			<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
				<picker mode="date" :value="selectDate"	 
				:start="startDate" :end="endDate" @change="bindDateChange"
				format="yyyy-MM-dd HH:mm">
				<view class="uni-input">{{selectDate}}</view>
				</picker>
			</view>
			<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
				<text style="font-size: 14px; color: red; font-weight: bold;">(&nbsp;&nbsp;{{xingqi}}&nbsp;&nbsp;)</text>
			</view>			
		</view>
		<view class="text-gray text-sm margin-top-sm text-center">
			请选择需要上课的学生
		</view>
		<div style="display: flex; justify-content: center; align-items: center;"> 
		
			<view  class="padding-top-xl" style="width: 160px;" >
				<view>
					  <select  v-model="selectedValue"  @change="handleChange">
					        <!--  动态生成选项  -->
					        <option  v-for="item  in  dataList"  :key="item.StudenID"  :value="item.StudenID">
					          {{  item.StudenNmae  }}
					        </option>
					      </select>
				</view>
				
			</view>
		</div>
		
		<view class="text-gray text-sm margin-top-sm text-center">
			请在课程表上选择您想要预约上课的时间
		</view>
		<view class="margin-top padding-lr">
			<view class="flex text-center" style="background-color: #e6e6e6;">
				<view class="flex-sub padding-tb">上午</view>
				<view class="flex-sub padding-tb">下午</view>
				<view class="flex-sub padding-tb">晚上</view>
				<view class="flex-sub padding-tb">凌晨</view>
			</view>
			<view class="times">
				<view class="align-center text-center solid-bottom">
					<view class="flex-sub  padding-tb" :class="{'selected':item.isSelected  }"
						  v-for="(item,index)  in  TimeList.morning" :key="index" @click="toggleSelect(item, 'morning')">
						  {{item.name}}
					</view>
				</view>
				<view class="align-center text-center solid-bottom">
					<view class="flex-sub  padding-tb" :class="{'selected':item.isSelected  }"
						  v-for="(item,index)  in  TimeList.noon" :key="index" @click="toggleSelect(item, 'noon')">
						  {{item.name}}
					</view>
				</view>
				<view class="align-center text-center solid-bottom">
					<view class="flex-sub  padding-tb" :class="{'selected':  item.isSelected  }"
						  v-for="(item,index)  in  TimeList.night" :key="index" @click="toggleSelect(item, 'night')">
						  {{item.name}}
					</view>
				</view>
				 <view class="align-center text-center solid-bottom">
					<view class="flex-sub  padding-tb" :class="{'selected':  item.isSelected }"
						  v-for="(item,index)  in  TimeList.earlyMmorning" :key="index" @click="toggleSelect(item, 'earlyMmorning')">
						  {{item.name}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex flex-between margin-top padding-lr text-gray">
			<view class="flex align-center">
				<text>是否重复</text>
				<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
					<text class="text-gray margin-right-xs">每周</text>
					<u-icon name="arrow-down-fill" color="#999" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="flex align-center">
				<text>重复次数</text>
				<view class="margin-left-sm flex bg-gray padding-lr padding-tb-xs radius">
					<text class="text-gray margin-right-xs">10</text>
					<u-icon name="arrow-down-fill" color="#999" size="24rpx"></u-icon>
				</view>
			</view>
		</view>

		<view class="padding-lr-xl margin-lr-xl margin-top-lg text-center text-lg">
			当前选择:2021年12月15日-2022年02月16日(每周三10:00、11:00)
		</view>

		<view class="margin-top-xl padding-lr">
			<u-button @click="submit" color="#ea3457" type="primary" size="large" shape="circle" text="立即预约">
			</u-button>
		</view>

		<view class="flex align-center justify-center text-gray margin-top">
			<text class="margin-right-xs">我的全部预约课程</text>
			<u-icon name="arrow-right-double" color="#999" size="24rpx"></u-icon>
		</view>

		<!-- 确定预约弹窗 -->
		<u-modal @confirm="confirmDefine" @cancel="isShowDefine=false" :show="isShowDefine" confirmText="确认预约"
			confirmColor="#ea3457" showCancelButton content='是否确认向对方发起课程预约？'></u-modal>

		<!-- 预约成功弹窗 -->
		<u-modal @confirm="confirmSuccess" @cancel="isShowSuccess=false" :show="isShowSuccess" confirmText="发送信息"
			confirmColor="#ea3457" title="约课请求已发送" showCancelButton content='您的约课请求发送成功,请耐心等待对方确认,您也可以直接联系对方,催促对方尽快确认~'>
		</u-modal>

		<u-no-network></u-no-network>
	</view>
</template>

<script>
import { timer } from '../../common/filters/filters';
		
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
							
			return {
				title:'',
				courid:'',
				usertokenid:'',
				usertype:'',
				teachertokenid:'',
				stdid:'',
				isShowDefine: false, //确定预约弹窗
				isShowSuccess: false, //预约成功弹窗
				selectDate:currentDate,
				xingqi:'',
				KcList:[],
				TimeList:{
					morning:[
						{id:1, name:'07:00', isSelected:false},
						{id:2, name:'08:00', isSelected:false},
						{id:3, name:'09:00', isSelected:false},
						{id:4, name:'10:00', isSelected:false},
						{id:5, name:'11:00', isSelected:false},
						{id:6, name:'12:00', isSelected:false}
					],
					noon:[
						{id:1, name:"13:00", isSelected:false},
						{id:2, name:"14:00", isSelected:false},
						{id:3, name:"15:00", isSelected:false},
						{id:4, name:"16:00", isSelected:false},
						{id:5, name:"17:00", isSelected:false},
						{id:6, name:"18:00", isSelected:false}
					],
					night:[
						{id:1, name:"19:00", isSelected:false},
						{id:2, name:"20:00", isSelected:false},
						{id:3, name:"21:00", isSelected:false},
						{id:4, name:"22:00", isSelected:false},
						{id:5, name:"23:00", isSelected:false},
						{id:6, name:"24:00", isSelected:false}
					],
					earlyMmorning:[
						{id:1, name:"01:00", isSelected:false},
						{id:2, name:"02:00", isSelected:false},
						{id:3, name:"03:00", isSelected:false},
						{id:4, name:"04:00", isSelected:false},
						{id:5, name:"05:00", isSelected:false},
						{id:6, name:"06:00", isSelected:false}
					]
				},				
				clickedValue: "",
				checkTimes:[],
				selectedValue:  null,
				dataList: []
			}
		},
		onLoad(e){
			console.log(this.selectDate);
			console.log(e);
			this.courid=e.courid;
			this.usertokenid=e.usertoken_id;
			this.usertype=e.user_type;
			this.teachertokenid=e.pagetoken_id;
			this.title=e.pageuser_type+'课程';
			console.log(this.courid+';'+this.usertokenid+';'+this.usertype+';'+this.teachertokenid)
			
			let url='/GetSelStudentsInfos/'
			let params = { 
				Usertokenid:this.usertokenid
				}
			this.$H.post(url,params).then(res =>{
					console.log(res.code);
					if(res.code==200)
					{
						this.dataList = res.data,
						console.log(res.data+';'+this.dataList);
					}
				})
				
		},
		onShow() {

		},
		
		
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		    },
		
		mounted() {
			// 在页面加载时，异步请求数据
			// this.fetchData();
			let url='/GetSelStudentsInfos/'
			let params = { 
				Usertokenid:this.usertokenid
				}
			this.$H.post(url,params).then(res =>{
					console.log(res.code);
					if(res.code==200)
					{
						this.dataList = res.data,
						console.log(res.data+';'+this.dataList);
					}
				})		
		},
		methods: {
			
			handleChange() {
			      // 处理用户选择变化的逻辑
			      console.log('Selected value:', this.selectedValue);
			      // 可以根据需要进行进一步处理
				  this.stdid=this.selectedValue;
				  console.log(this.stdid);
			    },
				
			toggleSelect(item, timeType)  { 
				item.isSelected  =  !item.isSelected;
				let currentTimesArr = this.$data.TimeList[timeType];
				if(item.isSelected){					
					let len = currentTimesArr.length - 1;
					for(let index in currentTimesArr){
						if(currentTimesArr[index].id == item.id){
							let nextIdx = len > parseInt(index) + 1 ? parseInt(index) + 1 : len;
							this.$data.TimeList[timeType][nextIdx].isSelected = true;
							break;
						}
					}
				}else{
					for(let index in currentTimesArr){
						this.$data.TimeList[timeType][index].isSelected = false;
					}
				}
			},													  
			bindDateChange: function(e) {
				this.selectDate = e.detail.value;
				
				let urlkc='/GetWeekDayInfos/'
				let params={
					WeekDay:this.selectDate,
				}
				this.$H.post(urlkc,params).then(res =>{
						if(res.code==200)
						{
							this.xingqi=res.data[0]['WeekDay'];
						}
					})
			},
			
			//预约
			submit() {
				let times = this.$data.TimeList;
				console.log(times);
				let selectTimes = [];
				for(let index in times){
					for(let cIdx in times[index]){
						if(times[index][cIdx].isSelected == true){
							selectTimes.push(times[index][cIdx].name);
						}
					}
				}
				
				this.checkTimes=selectTimes;
				
				console.log(selectTimes);
				console.log(this.checkTimes);
				
				if(selectTimes=="")
				{
					this.$toast('请先选择上课时间!');
					this.isShowDefine = false
				}else{
					 this.isShowDefine = true
				}
				
			},

			//确认预约
			confirmDefine() {
				let addurl=''
				let params=''
				this.isShowDefine = false
				addurl='/InsertUserMakeclassInfo/'
				params={
					 Tertockenid:this.teachertokenid,
					 Usertockenid:this.usertokenid,
					 Daterq:this.selectDate,
					 Starttime:this.checkTimes.join(','),
					 Endtime:'1',
					 Courid:this.courid,
					 Studid:this.stdid,
					 Xingqi:this.xingqi
				}
				 
				 console.log(params);
				 this.$H.post(addurl,params).then(res =>{
				 		if(res.code==200)
						{
							this.$toast(res.msg);
							this.isShowSuccess = true
						}else
						{
							this.$toast(res.msg);
						}
						
				 	})
				 
			},

			//预约成功发送信息
			confirmSuccess() {
				
				let addurltr=''
				let paramsinfo=''
				
				
				
				addurltr='/SendsmsMInfo/'
				paramsinfo={
					Tertockenid:this.teachertokenid,
					Stdid:this.stdid,
					Usertockenid:this.usertokenid,
					Usertype:this.usertype
				}
				console.log(paramsinfo);
				this.$H.post(addurltr,paramsinfo).then(Res =>{
						console.log(Res.code);
						if(Res.code==200)
						{
							console.log("aaaaa");
							// this.$toast(Res.msg);
							this.$routerGo(`/pages/user/user?usertoken_id=${this.usertokenid}&&user_type=${this.usertype}`)
						}else
						{
							this.$toast(Res.msg);
						}
						
					}).catch(error=>{console.log(error)})
					
					 this.isShowSuccess = false;
					
			},
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let years = date.getFullYear();
				
					
				if (type === 'start') 
				{
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				
				let urlkc='/GetWeekDayInfos/'
				let params={
					WeekDay:`${years}-${month}-${day}`,
				}
				this.$H.post(urlkc,params).then(res =>{
						if(res.code==200)
						{
							this.xingqi=res.data[0]['WeekDay'];
						}
					})
				
				return `${year}-${month}-${day}`;
			},
			 getRowValue(index,columnName) {
				 console.log("Clicked row index:", index);
			     const row = this.TimeList[index][columnName];
			     
			     console.log(row);

			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.kc-active {
		background-color: #ea3457;
		color: #fff;
	}
	.zg{
		background-color: magenta;
	}
	.typeBox {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 9px;
	  box-sizing: border-box;
	}
	.type_item {
	  width: calc(calc(100% - 30px) / 3);
	  height: 50px;
	  background: #fff;
	  color: #333;
	  font-size: 13px;
	  border-radius: 5px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 5px;
	}
	.typeActive {
	  background: #19a423;
	  color: #fff;
	}
	
	.padding-tb  {
	    /*  默认样式  */
	    /*  例如：padding:  10px;  */
	}
	
	.selected  {
	    background-color:  #ea3457;  /*  选中后的背景颜色  */
	    color:  #ffffff;  /*  选中后的文字颜色  */
	}
	.times{
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 每行放置四个元素 */
	}
	.times>view>view{
		border-bottom: 1px solid #C7C7C7;
	}
	.times>view>view:last-child{
		border-bottom: none;
	}
	
</style>

